<template>
  <!-- <h4>{{ person }}</h4> -->
  <h4>当前的x值是:{{ y.z }}</h4>
  <!-- 有效果的 -->
  <button @click="y = { z: 666 }">点我替换x</button>
  <!-- 没效果的,因为被shallowRef给包裹住了 -->
  <button @click="y.z++">点我替换y.z++</button>
  <hr />
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>薪资:{{ job.j1.salary }}K</h2>

  <!-- 姓名可以修改 -->
  <button @click="name += '~'">修改姓名</button>
  <!-- 年龄可以修改 -->
  <button @click="age++">修改年龄</button>

  <!-- 薪资不能修改 -->
  <button @click="job.j1.salary++">涨薪</button>

  <div>{{ num.aaa }}</div>
  <button @click="changNum">改变num的值</button>
</template>

<script>
// 1.shallowReactive:监听对象第一层的数据变化用于驱动视图更新，第二层或者更深层的数据变化了是不会更新视图的
// 2.shallowRef:如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来代替，那么就用它
import {
  ref,
  // reactive,
  toRefs,
  shallowReactive,
  shallowRef,
  // onMounted,
  // triggerRef
} from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",
  setup() {
    // let person = reactive({
    //   name: "张三",
    //   age: 18,
    //   job: {
    //     j1: {
    //       salary: 20
    //     }
    //   }
    // })

    // shallowReactive: 只处理对象最外层属性的响应式（浅响应式）
    // 也就是说,name和age是改的了的,但是job里的salary是改不了的
    let person = shallowReactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    //如果是reactive的话，name,age,salary是都可以改的
    // let person111 = reactive({
    //   name: "张三",
    //   age: 18,
    //   job: {
    //     j1: {
    //       salary: 200
    //     }
    //   }
    // })

    let x = ref(0);

    // shallowRef: 只处理基本数据类型的响应式,不进行对象的响应式处理
    // 我现在很明确，以后不会修改y里面的z
    let y = shallowRef({
      z: 0,
    });

    // 如果是ref的话, y1.z++是可以变化的
    let y1 = ref({
      z: 0,
    });
    console.log("y1==", y1);

    let num = shallowRef({ aaa: 123 });
    const changNum = () => {
      num.value.aaa += 1; // 视图不会更新
      // triggerRef(num) // ↑加上这个api，num.value.aaa += 1就会视图更新
      // num.value = { aaa: 456 } // 视图会更新
    };

    const test = { ...toRefs(person) };
    console.log(test); // {name: ObjectRefImpl, age: ObjectRefImpl, job: ObjectRefImpl}
    console.log(test.age); // ObjectRefImpl{_object: Proxy(Object), _key: 'age', __v_isRef: true}
    console.log(test.age.value); // 18

    return {
      // person,
      // person111,
      x,
      y,
      ...toRefs(person), // 薪资改不了
      // ...toRefs(person111), // 薪资改的了
      num,
      changNum,
    };
  },
};
</script>
